<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		/*v-cloak:放置第一次加载的时候，闪现{{msg}}表达式，而非其内容*/
		[v-cloak] {
			display: none;
		}
	</style>

	<body>
		<div id="app">
			<p ref="content">this is a ref zhiling</p>
			<button @click="hirt">获取P的值</button>
			<hr />
			<!--v-cloak:放置第一次加载的时候，闪现{{msg}}表达式，而非其内容-->
			<p v-cloak>{{msg}}</p>
			
			<!--自定义全局指令-->
			<p v-upcase-text="msg"></p>
			<!--自定义局部指令，只在#app中有效-->
			<p v-lower-case="msg"></p>
		</div>
		<hr />
		<div id="demo">
			<!--自定义全局指令,这里可以正常显示-->
			<p v-upcase-text="msg"></p>
			<!--自定义局部指令，只在#app中有效，所以无法使用自定义的局部指令-->
			<p v-lower-case="msg"></p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//自定义全局指令,将value编程大写，并赋值给innerHTML
		Vue.directive("upcase-text",function(el,binding){
			console.log(el,binding)
			//获取指令中的value值，并大写，再赋值给innerHtml
			el.innerHTML = binding.value.toUpperCase()
		})
		
		//------------------------------
//		alert("查看是否闪现表达式{{msg}}...")
		new Vue({
			el: "#app",
			data: {
				msg: "This Is a Cloak!"
			},
			methods: {
				hirt() {
					alert(this.$refs.content.innerHTML)
				}
			},
			directives:{
				'lower-case':{
					bind(el,binding){
						el.innerHTML = binding.value.toLowerCase()
					}
				}
			}
		})
		
		new Vue({
			el:"#demo",
			data:{
				msg:"Who Are You!"
			}
		})
	</script>

</html>
